<template>
    <div class="m-4 add">
        <div class="form-group">
            <div class="row">
                <div class="col-8">
                    <input type="text" id="formGroupExampleInput" class="form-control" v-model="inputValue"
                        placeholder="添加待办事件" @keydown.enter="additem">
                </div>
                <div class="col-4">
                    <select v-model="filterState" @change="filterBySate" class="form-control">
                        <option :value="TodoItemState.ALL">全部</option>
                        <option :value="TodoItemState.OPEN">待办中</option>
                        <option :value="TodoItemState.DONE">已完成</option>
                        <option :value="TodoItemState.DELETE">已删除</option>
                    </select>
                </div>
            </div>
        </div>
        <small class="form-text text-muted">回车即可加入</small>
        <div v-show="todos.length===0" class="form-text text-center text-muted">暂无数据</div>
        <ul class="list-group mt-4">
            <li v-for="item in todos"
              :key="item.id"
              class="list-group-item d-flex align-item-center justify-content-between"
              @click="check(item)"
              >
                <div>
                  <input
                  class="form-check-input"
                  type="checkbox"
                  :id="item.id"
                  :checked="item.state === TodoItemState.DONE"
                  :disabled="item.state === TodoItemState.DELETE">
                  <label
                    for="item.id"
                    :class="{ 'ps-2': true, 'line-throungh text-black-50': item.state === TodoItemState.DELETE }"
                    >{{ item.text }}</label>
                </div>
                <div class="btnBox" :class="{ 'd-none':  item.state !== TodoItemState.OPEN }">
                    <button class="btn btn-warning btn-sm me-2" @click.stop="editItem(item)">编辑</button>
                    <button class="btn btn-danger btn-sm" @click.stop="deleteItem(item.id)">删除</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import { TodoItemState } from '@/common/const'
import { TodoItem } from '@/common/interface'
import { useRouter, useRoute } from 'vue-router'
import store from '@/store'
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'add-list',
  components: {
  },
  setup () {
    const router = useRouter()
    const inputValue = ref('')
    const filterState = ref(TodoItemState.ALL)
    const additem = () => {
      if (inputValue.value === '') return
      store.commit('add', inputValue.value)
      inputValue.value = ''
    }

    const check = (item: TodoItem) => {
      if (item.state === TodoItemState.DELETE) return
      store.commit('check', item.id)
    }

    const editItem = (item: TodoItem) => {
      router.push({
         name: 'edit',
         params: {
          // ...item,
          ok: 123456
         },
         query: {
          id: item.id
         }
      })
    }

    const deleteItem = (id:string) => {
      store.commit('delete', id)
    }

    const filterBySate = (val: TodoItemState) => {
      if (val === TodoItemState.ALL) {
        return store.state.todos
      } else {
        return store.state.todos.filter(item => item.state === val)
      }
    }

    return {
      inputValue,
      filterState,
      TodoItemState,
      todos: computed(() => filterBySate(filterState.value)),
      additem,
      check,
      deleteItem,
      editItem,
      filterBySate
    }
  }
})
</script>

<style lang="less" scoped>
.add{
    text-align: left;
    .line-throungh{
        text-decoration: line-through;
    }
    .list-group-item{
        height: 46px;
        &:hover{
            .btnBox{
                display: block;
            }
        }
        .btnBox{
            display: none;
        }
    }
}
</style>
